<template>
	<view style="display: flex;justify-content: left;flex-direction: row;flex-wrap: wrap;">
		<div class="card" v-for="(item,index) in value" :key="index">
			<div class="title">
				<div>{{item.title}}</div>
				<div><el-tag size="small">{{item.unit}}</el-tag></div>
			</div>
			<div class="num">
				{{item.num}}
			</div>
		</div>
		
	</view>
</template>
<script>
	import {
		reactive,
		toRef,
		ref,
		computed

	} from 'vue';
	export default {
		props: {
			value: {
				type: Array,
				default: () => {
					return []
				}
			},			
		},
		setup(props,ctx){
			
			return {}
		}
	}
</script>
<style scoped>
	.card{
		width: 200px;
		height: 100px;
		box-shadow: 1px 1px 1px 2px #e2e2e2;
		margin: 0px 5px 10px 10px;
		padding: 0 10px;
	}
	.title{
		line-height: 40px;
		font-size: 15px;
		border-bottom: 1px solid #e2e2e2;
		display: flex;
		justify-content: space-between;
		flex-direction: row;		
	}
	.num{
		line-height: 60px;
		font-size: 20px;
		color: red;
	}
</style>
